<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录QQ邮箱</title>
  <!-- 标题栏logo图片 -->
  <link rel="shortcut icon" href="../images/qq-logo.png" type="image/png">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <!-- header和div一样的效果，是语义标记，用于放网站的头部信息 -->
  <header class="header">
    <!-- 头部区域分为左右两块，分散对齐 -->
    <div>
      <!-- 左边是图片 -->
      <img src="../images/qq-mail.png" alt="">
    </div>
    <div>
      <!-- 右边是菜单超链接 -->
      <a href="#">基本版</a> |
      <a href="#">English</a> |
      <a href="#">手机版</a> |
      <a href="#">企业邮箱</a>
    </div>
  </header>

  <!-- 页面主体区域 main语义标记，用于放网站主体信息 -->
  <main class="main">
    <!-- 分为三块，水平垂直都是居中 -->
    <div class="main-left">
      <div class="mail-text">QQ邮箱，常联系！</div>
      <div>
        1987年9月14日21时07分<br>
        中国第一封电子邮件<br>
        从北京发往德国<br>
        “越过长城，走向世界”<br>
      </div>
    </div>
    <div class="main-center">
      <img src="../images/bg02.gif" alt="">
    </div>

    <div>

      <div class="form-div">

        <div class="form-title-div">
          <div class="disable-text">微信登录</div>
          <div>QQ登录</div>
        </div>

        <div class="form-main-div">
          <!-- 用div和input模拟漂亮的输入框 -->
          <div class="input-div mr-div">
            <input type="text" placeholder="支持QQ号/邮箱/手机号">
          </div>

          <div class="input-div mr-div">
            <input type="password" placeholder="QQ密码">
          </div>

          <div class="mr-div">
            <label>
              <input type="checkbox">下次自动登录
            </label>
          </div>

          <div class="button-div mr-div">
            登&nbsp;录
          </div>

          <div class="mr-div qr-div">
            扫码快捷登录
          </div>

        </div>

      </div>

    </div>

  </main>

  <!-- 下方的超链接和版权信息，footer语义标记，和div一样，用于放网站下方信息 -->
  <footer>
    <a href="#">关于腾讯</a> |
    <a href="#">服务条款</a> |
    <a href="#">隐私政策</a> |
    <a href="#">客服中心</a> |
    <a href="#">联系我们</a> |
    <a href="#">帮助中心</a> |
    <span>
      ©1998 - 2021 Tencent Inc. All Rights Reserved.
    </span>

  </footer>


</body>

</html>